<template>
	<view style="position: relative;">
		<u-navbar title="兑换地址" :autoBack="true" placeholder>
		</u-navbar>
		<scroll-view :scroll-y="true" :style="{height: scrollViewHeight}">
			<view :style="{height: scrollViewHeight, position: 'relative'}">
				<map @callouttap="markertap" @markertap="markertap" id="map" :markers="markers" :style="{width: '100%', height: scrollViewHeight}" :scale="12" :latitude="latitude"
					:longitude="longitude"></map>
			</view>
		</scroll-view>
		<view :style="{bottom: bottomHeight}" class="detail-box">
			<view class="detail-box-1">
				<view style="font-size: 32rpx; color: #333; font-weight: bold;margin-bottom: 16rpx;">商家信息</view>
				<view @click="makePhone" style="margin-bottom: 16rpx;font-size: 30rpx;color: #333;font-weight: bold;display: flex;">
					<u--image
						src="/static/image/shop.png"
						shape="circle" width="24px" height="24px"></u--image>
					<view>
						<text style="padding: 0 16rpx;">{{info.store}}</text>
						<text class="iconfont icon-dianhua"></text>
					</view>
				</view>
				<view @click="openMap"  style="font-size: 30rpx;color: #333;font-weight: bold;display: flex;">
					<u--image
						src="/static/image/address.png"
						shape="circle" width="26px" height="26px"></u--image>
					<view>
						<text style="padding: 0 16rpx;">{{info.address}}</text>
						<text class="iconfont icon-daohang1"></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {propertyPointAddress} from '@/api/home.js';
	import {mapActions} from 'vuex';
	export default {
		data() {
			return {
				latitude: 29.712062,
				longitude: 106.626442,
				markers: [],
				points: [],
				info: {}
			}
		},
		computed: {
			appColor() {
				return '#e1251b'
			},
			scrollViewHeight() {
				return this.scrollHeight - 44 + this.bottom + 'px';
			},
			statusBarHeight1() {
				return this.statusBarHeight + 44 + 'px'
			},
			bottomHeight() {
				return this.bottom + 16 + 'px'
			}
		},
		onLoad({id}) {
			this.$cuLoading().then(() => {
				propertyPointAddress().then(res => {
					if(res.result.length > 0) {
						let first = {};
						if(id) {
							first = res.result.find(item => item.id === id);
						} else {
							first = res.result[0]
						}
						let {latitude, longitude} = first
						this.latitude = latitude;
						this.longitude = longitude;
						this.info = first;
						this.points = res.result;
						this.getMarkers(res.result);
					}
				}).finally(() => {
					uni.hideLoading()
				})
			})
		},
		methods: {
			...mapActions(['setDetail']),
			makePhone() {
				const {telephone: phoneNumber} = this.info
				uni.makePhoneCall({
					phoneNumber
				})
			},
			openMap() {
				const {latitude, longitude} = this.info;
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude)
				})
			},
			markertap({markerId}) {
				let cur = this.points.find(item => Number(item.id) === markerId);
				this.info = cur;
			},
			getMarkers(list) {
				let markers = [];
				const color = this.appColor;
				list.forEach((item, index) => {
					let {latitude, longitude} = item;
					let obj = {
						id: Number(item.id),
						callout: {
							content: item.store,
							padding: 10,
							borderRadius: 4,
							display: 'ALWAYS',
							bgColor: '#ffffffCC',
							color: color,
							fontSize: 15
						},
						latitude,
						longitude,
						iconPath: '/static/image/shop.png',
						width: '34px',
						height: '34px',
						rotate: 0,
						alpha: 1
					}
					markers.push(obj)
				})
				this.markers = markers;
			},
		}
	}
</script>


<style lang="scss" scoped>
	.detail-box {
		box-sizing: border-box;
		width: 100vw;
		padding: 32rpx;
		position: absolute;
		left: 0;
		.detail-box-1 {
			border-radius: 16rpx;
			background-color: #fff;
			padding: 32rpx;
		}
	}

</style>
